<template>
  <div>
    Son{{ num }}
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script>
/**
 * 组件名称：SonComp
 * 
 * 组件功能描述：这是一个子组件，用于接收并更新来自父组件的数字值。
 * 通过props接收一个数字和一个更新数字的方法，提供了一个点击事件来触发数字的更新。
 */
export default {
  name: "SonComp",
  props: {
    /**
     * num属性：一个必需的数字类型prop
     * 
     * 说明：这个属性用于接收父组件传递过来的数字值，子组件只能读取，不能直接修改。
     */
    num: {
      type: Number,
      required: true,
    },
    /**
     * setNum属性：一个必需的函数类型prop
     * 
     * 说明：这个属性用于接收父组件传递过来的用于更新数字值的方法，子组件通过调用这个方法来间接修改num的值。
     */
    setNum: {
      type: Function,
      required: true,
    },
  },
  methods: {
    /**
     * handleClick方法：点击事件处理函数
     * 
     * 说明：这个方法用于响应组件内的点击事件，当方法被调用时，它会通过调用setNum方法来触发对num属性的更新。
     */
    handleClick() {
      // props 特点：只读，不能修改
      // 想要修改props数据：1. 先在数据源定义更新数据方法 2. 再将方法传递过来从而调用方法修改数据
      // 数据源在哪，更新数据的方法就在哪
      this.setNum();
    },
  },
};
</script>

<style></style>
